<template>
    <div class="appMainWarp">
        <div class="demo_blok">
            <div class="qualityManagement">
                <!--质检表数据  坐席质检管理 -->
                <el-tabs type="border-card" v-model="activeName">
                    <el-tab-pane label="坐席质检管理" name="tab1">
                        <el-form
                            :inline="true"
                            :model="formData"
                            class="demo-form-inline"
                            size="small"
                            label-width="120px"
                            ref="formData"
                            :rules="rules"
                        >
                            <el-row>
                                <el-col class="text_left itemNoMargBtm">
                                    <el-form-item label="查询月" prop="month">
                                        <el-date-picker
                                            v-model="formData.month"
                                            type="month"
                                            placeholder="请输入要查询的月份"
                                            value-format="yyyy-MM"
                                            @change="handleInputvalue"
                                        ></el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="坐席人员">
                                        <el-input
                                            v-model="formData.staffName"
                                            placeholder="请输入要查询的坐席名称"
                                        ></el-input>
                                    </el-form-item>
                                    <div class="inlineBtn">
                                        <el-button
                                            type="primary"
                                            size="small"
                                            icon="el-icon-search"
                                            @click="getInitData"
                                            class="searchBtn"
                                        >查询</el-button>
                                        <el-button
                                            type="primary"
                                            size="small"
                                            icon="el-icon-refresh-right"
                                            @click="handleReset"
                                            class="resetBtn"
                                        >重置</el-button>
                                        <el-button
                                            type="primary"
                                            size="small"
                                            @click="clickImport"
                                        >质检报表导入</el-button>
                                        <el-button
                                            type="primary"
                                            size="small"
                                            icon="el-icon-download"
                                            @click="downloadFile"
                                        >点击下载质检表模板</el-button>
                                    </div>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-form-item label="月份:" prop="month">
                                    <el-date-picker
                                        v-model="formData.beginMonth"
                                        type="month"
                                        placeholder="请输入要删除的月份"
                                        value-format="yyyy-MM"
                                    ></el-date-picker>
                                </el-form-item>
                                <!-- <el-form-item label="删除结束时间" prop="month">
                                    <el-date-picker
                                        v-model="formData.endMonth"
                                        type="month"
                                        placeholder="请输入要删除的结束月份"
                                        value-format="yyyy-MM"
                                    ></el-date-picker>
                                </el-form-item>-->
                                <div class="inlineBtn">
                                    <el-button
                                        type="primary"
                                        size="small"
                                        @click="delectTableData"
                                        class="searchBtn"
                                    >删除数据</el-button>
                                </div>
                            </el-row>
                        </el-form>
                        <div class="text_center">
                            <template>
                                <el-table
                                    :data="tableData"
                                    border
                                    stripe
                                    style="width:100%"
                                    class="el-table heard-bg"
                                >
                                    <el-table-column :label="tableTitle">
                                        <el-table-column label="员工姓名" prop="staffName"></el-table-column>
                                        <el-table-column label="本月质检平均得分" prop="averageScore">
                                            <template
                                                slot-scope="scope"
                                            >{{ scope.row.averageScore | filteScoreNum }}</template>
                                        </el-table-column>
                                        <el-table-column label="质检差错" prop="mistake"></el-table-column>
                                        <el-table-column label="本月质检数" prop="monthCheckCount"></el-table-column>
                                        <el-table-column label="本月申诉数" prop="monthAppealCount"></el-table-column>
                                        <el-table-column label="操作" prop="staffName">
                                            <template slot-scope="scope">
                                                <el-button
                                                    type="primary"
                                                    size="small"
                                                    @click="UpdataTableInfoFun($event,scope.row)"
                                                >修改</el-button>
                                                <el-button
                                                    type="primary"
                                                    size="small"
                                                    @click="RemoveTableInfoFun($event,scope.row)"
                                                >删除</el-button>
                                            </template>
                                        </el-table-column>
                                    </el-table-column>
                                </el-table>
                                <Pagination
                                    :hanleChangeCurrentPage="hanleChangeCurrentPage"
                                    :handleChangeSize="handleChangeSize"
                                    :currentPage="currentPage"
                                    :pageSize="pageSize"
                                    :total="total"
                                />
                            </template>
                        </div>
                    </el-tab-pane>
                    <!-- ----------------------------------------------------------------------------------------- -->
                    <el-tab-pane label="团队质检管理" name="tab2">
                        <el-form
                            :inline="true"
                            :model="formDataGroup"
                            class="demo-form-inline"
                            size="small"
                            label-width="120px"
                            ref="formDataGroup"
                            :rules="formRules"
                        >
                            <el-row>
                                <el-col class="text_left itemNoMargBtm">
                                    <el-form-item label="查询开始时间" prop="month">
                                        <el-date-picker
                                            v-model="formDataGroup.month"
                                            type="month"
                                            placeholder="请输入要查询的开始时间"
                                            @change="handleInputvalueGroup"
                                            value-format="yyyy-MM"
                                        ></el-date-picker>
                                    </el-form-item>

                                    <div class="inlineBtn">
                                        <el-button
                                            type="primary"
                                            size="small"
                                            icon="el-icon-search"
                                            @click="getInitDataGroup"
                                            class="searchBtn"
                                        >查询</el-button>
                                        <el-button
                                            type="primary"
                                            size="small"
                                            icon="el-icon-refresh-right"
                                            @click="handleResetGroup"
                                            class="resetBtn"
                                        >重置</el-button>
                                    </div>
                                </el-col>
                            </el-row>
                        </el-form>
                        <div class="text_center">
                            <template>
                                <el-table
                                    :data="tableDataGroup"
                                    border
                                    stripe
                                    style="width:100%"
                                    class="el-table heard-bg"
                                >
                                    <el-table-column :label="tableTitleGroup">
                                        <template v-for="item in tablecolumnGroup">
                                            <el-table-column
                                                :label="item.label"
                                                :prop="item.prop"
                                                :key="item.label"
                                                :formatter="item.formatter"
                                            ></el-table-column>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <Pagination
                                    :hanleChangeCurrentPage="hanleChangeCurrentPageGroup"
                                    :handleChangeSize="handleChangeSizeGroup"
                                    :currentPage="currentPageGroup"
                                    :pageSize="pageSizeGroup"
                                    :total="totalGroup"
                                />
                            </template>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <el-dialog
                v-drag
                :close-on-click-modal="false"
                :visible.sync="Show"
                append-to-body
                center
                width="500px"
                @close="cancelClick"
            >
                <div slot="title">质检数据导入</div>
                <YsUpload ref="YsUpload" :actionUrl="actionUrl" @getInitData="getInitData"></YsUpload>
                <!-- <a @click="downloadFile" class="downloadClass">点击此处下载模板</a> -->

                <div slot="footer" class="dialog-footer">
                    <el-button
                        size="small"
                        icon="el-icon-circle-close"
                        @click="cancelClick"
                        class="cancelBtn"
                    >取 消</el-button>
                    <el-button
                        id="importBut"
                        type="primary"
                        size="small"
                        @click="handleImport"
                        class="submitBtn"
                        icon="el-icon-circle-check"
                    >确定</el-button>
                </div>
            </el-dialog>
        </div>
        <el-dialog
            v-drag
            :close-on-click-modal="false"
            :visible.sync="showDialog"
            append-to-body
            center
            width="500px"
            @close="showDialog= false"
        >
            <div slot="title">质检修改</div>
            <el-form label-width="130px" :model="rowData" ref="rowData" size="small">
                <el-form-item label="员工姓名:">
                    <span class="el-form-item-span">{{rowData.staffName}}</span>
                </el-form-item>
                <el-form-item label="时间:">
                    <span class="el-form-item-span">{{rowData.month|filterDate}}</span>
                </el-form-item>
                <el-form-item label="本月质检平均得分:">
                    <el-input v-model="rowData.averageScore" placeholder="请输入本月质检平均得分"></el-input>
                </el-form-item>
                <el-form-item label="质检差错:">
                    <el-input v-model="rowData.mistake" placeholder="请输入本月质检差错"></el-input>
                </el-form-item>
                <el-form-item label="本月质检数:">
                    <el-input v-model="rowData.monthCheckCount" placeholder="请输入本月质检数"></el-input>
                </el-form-item>
                <el-form-item label="本月申诉数:">
                    <el-input v-model="rowData.monthAppealCount" placeholder="请输入得分"></el-input>
                </el-form-item>
                <!-- staffName -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button
                    size="small"
                    icon="el-icon-circle-close"
                    @click="showDialog=false"
                    class="cancelBtn"
                >取 消</el-button>
                <el-button
                    id="importBut"
                    type="primary"
                    size="small"
                    @click="updataScroeFun"
                    class="submitBtn"
                    icon="el-icon-circle-check"
                >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Pagination from '@/components/Pagination/Pagination.vue';
import QualityTestingEchart from '@/views/home/qualityTesting/QualityTestingEchart.vue';
import YsUpload from '@/components/YsUpload/YsUpload.vue';
import request from '@/apis/request';

import moment from "moment";
export default {
    name: 'qualityManagement',
    components: { Pagination, QualityTestingEchart, YsUpload },
    data() {
        return {
            formData: {
                month: '',
                staffName: '',
                beginMonth: '',
                // endMonth: '',//结束月
            },
            tableTitle: '',
            tableData: [],
            Show: false,
            showDialog: false,
            currentPage: 1,
            pageSize: 10,
            total: 0,
            formDataGroup: {
                month: '',
            },
            tableTitleGroup: '',
            tableDataGroup: [],
            currentPageGroup: 1,
            pageSizeGroup: 10,
            totalGroup: 0,
            months: [],
            tablecolumnGroup: [],
            activeName: 'tab1',
            actionUrl: '/iccsrv/quality/importStaff',
            rules: {
                moth: [
                    { required: true, message: '请输入要查询的月份!', trigger: 'blur' },
                ],
            },
            formRules: {
                moth: [
                    { required: true, message: '请输入要查询的月份!', trigger: 'blur' },
                ],
            },
            rowData: {
                id: 0,
                staffName: '',
                month: '',
                mistake: '',
                averageScore: '',
                monthAppealCount: '',
                monthCheckCount: '',
            }
        }
    },
    filters: {
        filterDate: (value) => {
            if (value) {
                return moment(value).format('YYYY-MM');
            } else {
                return '';
            }
        },
        filteScoreNum: (value) => {
            if (value) {
                let values = parseFloat(value).toFixed(2);
                return values
            } else {
                return '';
            }
        }
    },
    mounted() {
        this.formData.month = moment().format('YYYY-MM');
        this.formDataGroup.month = moment().format('YYYY-MM');
        this.getInitData();
        this.handleInputvalue(this.formData.month);
        this.getInitDataGroup();
        this.handleInputvalueGroup();
    },
    methods: {
        //查询
        // 获取当月月份数据
        getInitData(value) {
            // console.log('获取当月月份数据', this.formData.month);
            let params = {};
            if (value == '2') {
                params = {
                    month: this.formData.month,
                    staffName: this.formData.staffName,
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                };
            } else {
                params = {
                    month: this.formData.month,
                    staffName: this.formData.staffName,
                    pageNum: 1,
                    pageSize: 10,
                };
            }

            this.$post.information.pageGroup(params).then((res) => {
                console.log('res111111__', res);
                if (res.data.success) {
                    this.tableData = res.data.content.records;
                    this.total = res.data.content.total;
                }
            });
        },
        // 选中日期后的方法
        handleInputvalue(value) {
            console.log('点击日期控件', value);
            const year = value.substr(0, 4);
            const mouth = value.substr(5, 2) * 1;
            this.tableTitle = `${year}年${mouth}月信用卡团队坐席服务质量统计表`
            console.log('year', year);
            console.log('mouth', mouth);
        },
        // 点击导入
        clickImport() {
            this.Show = true;
        },
        // 导入点击确定按钮
        handleImport() {
            this.$refs.YsUpload.submitupload();
        },
        // 取消
        cancelClick() {
            this.$refs.YsUpload.clearFilesFun();
            this.Show = false;
        },

        // 下载按钮
        downloadFile() {

            const url = '/iccsrv/custlabel/download';
            request({
                url,
                method: 'get',
                responseType: 'blob',
                params: 'iccQualityStaffCheck.xlsx',
            }).then((res) => {
                // console.log(res, '相应报文')
                const blobUrl = window.URL.createObjectURL(new Blob([res.data]));
                const a = document.createElement('a');
                a.style.display = 'none';
                a.download = '质检报表模板.xlsx';
                a.href = blobUrl;
                document.body.appendChild(a);
                a.click();
                document.body.removeChild(a);
            });
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            console.log('this.currentPage', val);
            this.currentPage = val;
            this.getInitData('2');
            this.tableData = [];
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            console.log('pageSize', val);
            this.pageSize = val;
            this.getInitData('2');
            this.tableData = [];
            console.log('this.pageSize', this.pageSize);
        },
        // 重置
        handleReset() {
            this.formData.month = '',
                this.tableData = [];
        },
        // 数据修改
        UpdataTableInfoFun(e, row) {
            // console.log('修改方法', row);
            this.showDialog = true;
            this.rowData = row
        },
        updataScroeFun() {
            let params = {
                id: this.rowData.id,
                staffName: this.rowData.staffName,
                mistake: this.rowData.mistake,
                averageScore: this.rowData.averageScore,
                monthAppealCount: this.rowData.monthAppealCount,
                monthCheckCount: this.rowData.monthCheckCount,
            }
            this.$post.information.updateStaffCheck(params).then((res) => {
                if (res.data.success) {
                    this.$alert(res.data.msg, '质检修改提示', {
                        customClass: 'success', type: 'success',
                    });
                } else {
                    this.$alert(res.data.msg, '质检修改提示', {
                        customClass: 'error', type: 'error',
                    });
                }
                this.showDialog = false;
                this.getInitData();
            })
        },
        // 数据删除
        RemoveTableInfoFun(e, row) {
            console.log('删除方法', row);
            let params = {
                id: row.id
            };
            this.$post.information.deleteStaffCheck(params).then((res) => {
                if (res.data.success) {
                    this.$alert(res.data.msg, '质检删除提示', {
                        customClass: 'success', type: 'success',
                    });
                } else {
                    this.$alert(res.data.msg, '质检删除提示', {
                        customClass: 'error', type: 'error',
                    });
                }
                this.getInitData();
            })
        },
        // 删除指定时间类的数据
        delectTableData() {
            let params = {
                beginMonth: this.formData.beginMonth,
                endMonth: this.formData.beginMonth,
            };
            this.$post.information.deleteMonthStaffCheck(params).then((res) => {
                if (res.data.success) {
                    this.$alert(res.data.msg, '质检删除提示', {
                        customClass: 'success', type: 'success',
                    });
                } else {
                    this.$alert(res.data.msg, '质检删除提示', {
                        customClass: 'error', type: 'error',
                    });
                }
            })
        },
        /////////////////////////////////////////////////// 小组质检统计表
        // 修改查询到的月份数据
        getSelectMonth() {
            let monthss = moment(this.formDataGroup.month).format('M') * 1;
            console.log('月份递减——————————', monthss);
            for (let i = 0; i < 6; i++) {
                if (monthss > 0) {
                    this.months.push(monthss);
                    monthss--
                } else if (monthss === 0) {
                    monthss = 12;
                    this.months.push(monthss);
                    monthss--
                }
            }
            this.tablecolumnGroup = [
                { label: '小组', prop: 'staffGroup', flag: true },
                { label: '姓名', prop: 'staffName', flag: true },
                { label: `${this.months[5]}月`, prop: 'scoreNearBySix[0]', flag: true, formatter: this.dateFormat },
                { label: `${this.months[4]}月`, prop: 'scoreNearBySix[1]', flag: true, formatter: this.dateFormat },
                { label: `${this.months[3]}月`, prop: 'scoreNearBySix[2]', flag: true, formatter: this.dateFormat },
                { label: `${this.months[2]}月`, prop: 'scoreNearBySix[3]', flag: true, formatter: this.dateFormat },
                { label: `${this.months[1]}月`, prop: 'scoreNearBySix[4]', flag: true, formatter: this.dateFormat },
                { label: `${this.months[0]}月`, prop: 'scoreNearBySix[5]', flag: true, formatter: this.dateFormat },
            ]
            console.log('this.months月份数据', this.months);
            // 每次都要情况数组 防止数据二次污染
            this.months = [];
        },
        //查询
        getInitDataGroup() {
            this.getSelectMonth();
            let params = {
                month: this.formDataGroup.month,
            };
            console.log('小组质检统计表参数---------', params);
            this.$post.information.pageStaff(params).then((res) => {
                console.log('res111111__绩效管理', res);
                if (res.data.success) {
                    this.tableDataGroup = res.data.content;
                    console.log('this.tableDataGroup', this.tableDataGroup);
                    this.totalGroup = res.data.content.total;
                }
            });
        },
        // 选中日期后的方法
        handleInputvalueGroup() {
            console.log('点击日期控件', this.formDataGroup.month);
            const value = this.formDataGroup.month;
            const year = value.substr(0, 4);
            const mouth = value.substr(5, 2) * 1;
            this.tableTitleGroup = `${year}年${mouth}月信用卡团队坐席服务质量统计表`
            console.log('year', year);
            console.log('mouth', mouth);
        },

        // 页码切换方法
        hanleChangeCurrentPageGroup(val) {
            console.log('this.currentPageGroup', val);
            this.currentPageGroup = val;
            this.getInitDataGroup('2');
            this.tableDataGroup = [];
        },
        // 切换分页大小方法
        handleChangeSizeGroup(val) {
            console.log('pageSizeGroup', val);
            this.pageSizeGroup = val;
            this.getInitDataGroup('2');
            this.tableDataGroup = [];
            console.log('this.pageSizeGroup', this.pageSizeGroup);
        },
        // 重置
        handleResetGroup() {
            this.formDataGroup.month = '',
                this.tableDataGroup = [];
        },
        dateFormat(row, column, cellValue, index) {
            // console.log('row', row, 'column', column, 'cellValue', cellValue, 'index', index);
            let cellValues = parseFloat(cellValue).toFixed(2);
            return cellValues;
        }
    },
}
</script>
<style lang="scss" >
.qualityManagement {
    .el-tabs--border-card {
        box-shadow: none;
        border: none;
    }
}
</style>
<style  scoped lang="scss">
.appMainWarp {
    /* padding: 10px; */
    .demo_blok {
        border: 12px solid #ebebeb;
        border-radius: 3px;
        transition: 0.2s;
        height: 100% !important;
    }

    .qualityManagement {
        height: auto;
        text-align: left;
        .text_center {
            width: 97%;
            margin: 0 auto;
            padding-bottom: 20px;
        }
        .el-table {
            margin-top: 10px;
        }
        .el-tabs__content {
            height: 80vh;
        }
    }
}
</style>